<template>
    <view class="Box" :style="{ '--color': color }">
        <navBar title="付款码" bgColor="transparent" color="#ffffff"></navBar>
        <view class="Content">
            <view class="list">
                <view class="list_child" @click="changeType(0)" v-if="type == 1">
                    <view class="d-flex a-center">
                        <view class="iconfont icon-yuebao size42 white"></view>
                        <text class="white size32 m-left20">余额付款</text>
                    </view>
                    <view class="iconfont icon-a-zujian32 h6 white"></view>
                </view>

                <view class="showPay" v-if="type == 0">
                    <view class="Pay_head">
                        <view class="d-flex a-center">
                            <view class="iconfont icon-yuebao size42 color"></view>
                            <text class="color size34 m-left20">余额付款</text>
                        </view>
                        <text class="size26 color" @click="quota = true">生成定额码</text>
                    </view>
                    <view class="Mainbody">
                        <view class="Main_head">
                            <text class="Main_head_title">请店员使用商户端扫码付款</text>
                            <view class="iconfont icon-shuaxin black size40 bold" @click="changeType(0)"></view>
                        </view>
                        <view class="CodeBox">
                            <image :src="info.img" class="Code"></image>
                            <view class="expiredPop" v-if="showCode" @click="changeType(0)">
                                <text class="size30 white">支付码过期</text>
                                <text class="h6 white m-top10">点击刷新</text>
                            </view>
                        </view>
                    </view>
                    <view class="myMoney">账户余额 ：￥{{ info.v_money }}</view>
                </view>
            </view>

            <view class="list">
                <view class="list_child" @click="changeType(1)" v-if="type == 0">
                    <view class="d-flex a-center">
                        <view class="iconfont icon-jifen size42 white"></view>
                        <text class="white size32 m-left20">积分付款</text>
                    </view>
                    <view class="iconfont icon-a-zujian32 h6 white"></view>
                </view>
                <view class="showPay" v-if="type == 1">
                    <view class="Pay_head">
                        <view class="d-flex a-center">
                            <view class="iconfont icon-jifen size42 color"></view>
                            <text class="color size34 m-left20">积分付款</text>
                        </view>
                        <text class="color size26" @click="quota = true">生成定额码</text>
                    </view>
                    <view class="Mainbody">
                        <view class="Main_head">
                            <text class="Main_head_title">请店员使用商户端扫码付款</text>
                            <view class="iconfont icon-shuaxin black size40 bold" @click="changeType(1)"></view>
                        </view>
                        <view class="CodeBox">
                            <image :src="info.img" class="Code"></image>
                            <view class="expiredPop" v-if="showCode" @click="changeType(1)">
                                <text class="size30 white">支付码过期</text>
                                <text class="h6 white m-top10">点击刷新</text>
                            </view>
                        </view>
                    </view>
                    <view class="myMoney">账户积分 ：{{ info.v_jifen_yue }}</view>
                </view>
            </view>
        </view>

        <u-popup :show="quota" :round="15" @close="closequota" closeOnClickOverlay>
            <view class="quota">
                <view class="quotaMoney">
                    <text class="iconfont size30 white bold" :class="type == 0 ? 'icon-qianqian-' : 'icon-jifen'"></text>
                    <text class="size46 bold m-left10">{{ quotaVal }}</text>
                </view>

                <view class="telNum_box">
                    <view class="Num_list" @click="placeInput(1)">1</view>
                    <view class="Num_list" @click="placeInput(2)">2</view>
                    <view class="Num_list" @click="placeInput(3)">3</view>
                    <view class="Num_list" @click="placeInput(11)" @touchstart="handleTouchStart">
                        <view class="iconfont icon-huishan white size50"></view>
                    </view>
                    <view class="Num_list" @click="placeInput(4)">4</view>
                    <view class="Num_list" @click="placeInput(5)">5</view>
                    <view class="Num_list" @click="placeInput(6)">6</view>
                    <view class="Num_list Confirm" @click="placeInput(12)">确定</view>
                    <view class="Num_list" @click="placeInput(7)">7</view>
                    <view class="Num_list" @click="placeInput(8)">8</view>
                    <view class="Num_list" @click="placeInput(9)">9</view>
                    <view class="Num_list Zero" @click="placeInput(0)">0</view>
                    <view class="Num_list" :class="{ bg37: type == 1 }" @click="placeInput('.')">
                        <view class="dot" :class="{ bgAF: type == 1 }"></view>
                    </view>
                </view>
            </view>
        </u-popup>

        <u-popup :show="show" :round="10" mode="center" bgColor="transparent">
            <view class="rows">
                <view class="quotaCode">
                    <view class="quotaCode_top">
                        <text class="quotaCode_top_title">定额付款码</text>
                        <view class="iconfont icon-shuaxin black size40 bold" @click="getMoneyQr()"></view>
                    </view>
                    <text class="row j-centert color_99 size26 m-top30">请店员使用商户端扫码付款</text>
                    <view class="CodeBox">
                        <image :src="info.img" class="Code"></image>
                        <view class="expiredPop" v-if="showCode" @click="getMoneyQr()">
                            <text class="size30 white">支付码过期</text>
                            <text class="h6 white m-top10">点击刷新</text>
                        </view>
                    </view>
                    <view class="row j-centert a-center black size40 bold m-top30">支付 {{ quotaVal }} {{ Unit }}</view>
                </view>
                <view class="row j-centert p-top30">
                    <view class="iconfont icon-close-f white size56" @click.stop="closeShow"></view>
                </view>
            </view>
        </u-popup>

        <contact color="#d7d7d7"></contact>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            quota: false,
            show: false,
            quotaVal: '',
            type: 0, // 0：余额付款 1：积分付款
            info: '',
            Countdown: null,
            showCode: false,
            longPressTime: 500,
            timer: null
        }
    },
    onLoad() {
        this.getMoneyQr()
    },
    methods: {
        getMoneyQr() {
            this.showCode = false
            if (this.Countdown) clearInterval(this.Countdown)
            this.$http
                .get({
                    url: '/DiyApi/getMoneyQr',
                    data: {
                        type: this.type,
                        money: this.quotaVal
                    }
                })
                .then((res) => {
                    if (res.code != 200) {
                        this.show = false
                        this.quotaVal = ''
                        this.$Toast(res.msg)
                        return
                    }
                    const result = res.data
                    this.info = result
                    if (result.expire_time) this.expiredTime(result.expire_time)
                })
        },
        changeType(type) {
            this.type = type
            this.getMoneyQr()
        },
        placeInput(val) {
            if (this.type == 1 && val == '.') return
            if (val == 12) {
                this.quota = false
                this.show = true
                this.getMoneyQr()
                return
            }
            if (val == 11 && !this.quotaVal) return
            if (val == 11) return (this.quotaVal = this.quotaVal.slice(0, -1))
            if (this.quotaVal && this.quotaVal.includes('.') && val == '.') return
            this.quotaVal = `${this.quotaVal}${val}`.replace(/(\d*\.\d{2})\d*/, '$1')

            const resultArr = this.quotaVal.split('')
            if (resultArr.length > 1 && resultArr[0] == '0' && resultArr[1] == '0') {
                this.quotaVal = this.quotaVal.slice(0, -1)
            } else if (resultArr[0] == '.') {
                this.quotaVal = '0.'
            } else if (resultArr.length > 1 && resultArr[0] == '0' && resultArr[1] != '0' && resultArr[1] != '.') {
                this.quotaVal = resultArr[1]
            }
        },
        closeShow() {
            this.quotaVal = ''
            this.show = false
            this.getMoneyQr()
        },
        closequota() {
            this.quota = false
            this.quotaVal = ''
        },
        expiredTime(Time) {
            let timeDate = +Time
            this.Countdown = setInterval(() => {
                if (timeDate > 1) {
                    timeDate--
                } else {
                    clearInterval(this.Countdown)
                    this.Countdown = null
                    this.showCode = true
                }
            }, 1000)
        },
        handleTouchStart(e) {
            if (this.timer) {
                clearTimeout(this.timer)
                this.timer = null
            }
            this.timer = setTimeout(() => {
                this.quotaVal = ''
                this.timer = null
            }, this.longPressTime)
        }
    },

    computed: {
        ...mapState(['color', 'bid', 'vid']),
        Unit() {
            return this.type == 0 ? '元' : '分'
        }
    },
    onUnload() {
        if (this.Countdown) {
            clearInterval(this.Countdown)
            this.Countdown = null
        }
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: var(--color);
}
</style>
<style lang="scss" scoped>
.Box {
    background-color: var(--color);
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.Content {
    flex: 1;
    width: 710rpx;
    margin: 0 auto;
    // border: 1rpx solid #fff;
    padding-top: 20rpx;
}

.list {
    width: 100%;
    margin-bottom: 20rpx;
}

.list_child {
    width: 100%;
    height: 130rpx;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icon-jifen {
    color: #efb336;
}

.showPay {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10rpx;
}

.Pay_head {
    width: 100%;
    height: 100rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f2f2f2;
}

.Mainbody {
    width: 100%;
    padding: 30rpx;
}

.Main_head {
    width: 100%;
    display: flex;
    align-items: center;
}

.Main_head_title {
    color: #999;
    font-size: 26rpx;
    flex: 1;
    padding-left: 40rpx;
    display: flex;
    justify-content: center;
}

.CodeBox {
    width: 380rpx;
    height: 380rpx;
    margin: 30rpx auto 0;
    box-sizing: border-box;
    position: relative;
}
.Code {
    width: 100%;
    height: 100%;
}
.expiredPop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.myMoney {
    width: 100%;
    height: 110rpx;
    border-top: 1rpx solid #f2f2f2;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: var(--color);
}

.quota {
    width: 100%;
    padding: 20rpx;
    background-color: #333333;
    border-radius: 20rpx 20rpx 0 0;
}

.quotaMoney {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}

.telNum_box {
    width: 100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16rpx;
    margin-top: 20rpx;
}

.Num_list {
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 46rpx;
    background-color: #474747;
    border-radius: 12rpx;
}

.Confirm {
    height: 100%;
    grid-column: 4 / span 1;
    grid-row: 2 / span 3;
    font-weight: normal !important;
    font-size: 36rpx !important;
    background-color: var(--color) !important;
}

.Zero {
    width: 100%;
    grid-column: 1 / span 2;
    grid-row: 4 / span 1;
}

.dot {
    width: 10rpx;
    height: 10rpx;
    background-color: #ffffff;
    border-radius: 50%;
}

.quotaCode {
    width: 710rpx;
    background-color: #ffffff;
    padding: 30rpx 30rpx 50rpx 30rpx;
    border-radius: 30rpx;
}

.quotaCode_top {
    width: 100%;
    display: flex;
    align-items: center;
}

.quotaCode_top_title {
    flex: 1;
    display: flex;
    justify-content: center;
    font-size: 38rpx;
    font-weight: bold;
    padding-left: 20rpx;
}
</style>
